import React from 'react';
import { ActionButton, Box, Text } from '@nova-hf/ui';
import { useTranslation } from 'beta/utils/i18n';
import { useRouter } from 'next/router';

type CancelASContainerProps = {
  contractId: string;
};

const CancelASContainer = ({ contractId }: CancelASContainerProps) => {
  const router = useRouter();
  const customerId = router.query.customerId ?? '';
  const { t } = useTranslation(['alltSaman', 'errors']);

  return (
    <Box
      alignItems="center"
      justifyContent="center"
      display="flex"
      flexDirection={['column', 'row', 'row']}
      gap={4}
    >
      <Box width="8/12">
        <Box marginBottom={2}>
          <Text variant="pLargeBold">{t('cancelContract.cancelButton')}</Text>
        </Box>
        <Box>
          <Text variant="pSmallRegular">{t('cancelContract.cancelDescription')}</Text>
        </Box>
      </Box>
      <Box width={{ md: '4/12' }}>
        <ActionButton
          text="Skrá úr AlltSaman"
          onClick={() => {
            router.push(`/beta/${customerId}/askriftir/${contractId}/uppsogn`);
          }}
          colorScheme="orange"
          icon="close"
        />
      </Box>
    </Box>
  );
};

export default CancelASContainer;